<template>

  <div class="order">
    
    <div class="order_top">订单信息</div>

    <div class="order_info">
      <div class="order_part_one flex">
        <div class="order_info_l">
          <p>订单编号：{{info.ordersn}}</p>
          <p>下单时间：{{info.dateline}}</p>
          <p>预约时间：{{info.meal_timestamp}}</p>
          <p>支付方式：<sapn v-if="info.pay_type == 1">余额支付</sapn><sapn v-if="info.pay_type == 2">在线支付</sapn><sapn v-if="info.pay_type == 4">次卡支付</sapn></p>
           <p>服务类型：{{info.service}}</p>
          <p>红包抵扣：{{info.coupon}}</p>
        </div>
        <div class="order_info_r">
          <p class="order_state">已完成</p>
          <p class="order_money">{{info.paymoney}}元</p>
        </div>        
      </div>
      <div class="order_part_two">
        <p>小伙伴：{{info.worker_name}}</p>
        <p>车辆：{{info.mycar}}</p>
        <p>地址：{{info.address}}</p>
        <p>地址详情：{{info.addr_detail}}</p>
      </div>
    </div>

    <div class="order_serve">
      <div class="order_serve_tit">服务前车况照片</div>
      <ul class="order_serve_cont flex">
        <li v-for="(item,index) in info.images_before">
          <img @click="magnify(index,0)" :src="item">
        </li>
      </ul>
    </div>

    <div class="order_serve">
      <div class="order_serve_tit">服务后车况照片</div>
      <ul class="order_serve_cont flex">
        <li v-for="(item,index) in info.images_after">
          <img @click="magnify(index,1)" :src="item">
        </li>
      </ul>
    </div>
    
    <div class="order_firm" v-if="info.is_evaluate == 1">
      <div class="order_firm_title">
        评分&nbsp;
        <i @click="setrate(1)" v-bind:class="[evaluate.score>0?'iconfont order_firm_star icon-star':'iconfont order_firm_star icon-star5']"></i>
        <i @click="setrate(2)" v-bind:class="[evaluate.score>1?'iconfont order_firm_star icon-star':'iconfont order_firm_star icon-star5']"></i>
        <i @click="setrate(3)" v-bind:class="[evaluate.score>2?'iconfont order_firm_star icon-star':'iconfont order_firm_star icon-star5']"></i>
        <i @click="setrate(4)" v-bind:class="[evaluate.score>3?'iconfont order_firm_star icon-star':'iconfont order_firm_star icon-star5']"></i>
        <i @click="setrate(5)" v-bind:class="[evaluate.score>4?'iconfont order_firm_star icon-star':'iconfont order_firm_star icon-star5']"></i>
      </div>
      <div class="order_firm_content">{{evaluate.comment_detail}}</div>
    </div>
    <button class="order_firm_btn" @click="toFirm" v-if="info.is_evaluate == 0">去评价</button>


    <!-- 放大图 -->
    <big-img v-show="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>

  </div>
  
</template>

<script>
import BigImg from '../../common/bigImg.vue'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'OrderOver',
  data () {
    return {
      info: {},
      evaluate: {},
      // 大图
      showImg: false,
      imgSrc: '',
    }
  },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  components: {
    'big-img': BigImg
  },
  methods: {
    // 大图
    magnify(index,e) {
      this.showImg = true;
      if (e == 0) {
        this.imgSrc = this.info.images_before[index];
      } else if (e == 1) {
        this.imgSrc = this.info.images_after[index];
      }
    },
    viewImg(){
      this.showImg = false;
    },
    // 获取接口
    getInfo(){
      var that = this;
      axios.get(global.api.order.customer.info,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          order_id: global.order_id,
        }
      })
      .then(function(res){
        console.log("orderover then");
        console.log(res);
        if (res.data.error == 0) {
          that.info = res.data.order;
          if (res.data.order.is_evaluate == 1) {
            that.evaluate = res.data.evaluate
          }
        }
      })
      .catch(function(res){
        console.log("orderover catch");
        console.log(res);
      }) 
    },
    // 评分
    toFirm(){
      this.$router.push({
        name:'OrderFirm',
        // params: {
        //   order_id: global.order_id
        // }
      })
    },
  },
}
</script>

<style scoped>
  .order{

  }
  .order_top{
    color: #2ecc80;
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding-left: 1rem;
    font-size: 1.1rem;
  }
  .order_info{
    text-align: left;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    padding: 1rem;
  }
  .order_info p{
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    line-height: 1.7rem;
  }
  .order_part_one{
    justify-content: space-between;
    align-items: flex-start;
  }
  .order_part_two{

  }
  .order_info_l{

  }
  .order_info_r{
    text-align: right;
  }
  .order_info_r .order_state{
    color: #2ecc80;
  }
  .order_info_r .order_money{
    font-size: 1.4rem;
    line-height: 2rem;
  }
  /* 服务 */
  .order_serve{
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    /*padding: 1rem;*/
  }
  .order_serve_tit{
    color: #2ecc80;
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding-left: 1rem;
    font-size: 1.1rem;
  }
  .order_serve_cont{
    flex-wrap: wrap;
    margin: 1.2rem 3% 1rem;
  }
  .order_serve_cont li{
    width: 32%;
    height: 9.5rem;
    margin-right: 2%;
    margin-bottom: 0.7rem;
  }
  .order_serve_cont li:nth-of-type(3n+0){
    margin-right: 0;
  }
  .order_serve_cont img{
    width: 100%;
    height: 100%;
  }
  /*评分*/
  .order_firm{
    padding: 1rem 1rem 2rem 1rem;
  }
  .order_firm_title{
    text-align: left;
    font-size: 0.9em;
    /*padding-left: 1rem;*/
  }
  .order_firm_star{
    font-size: 0.9em;
    color: #2ecc80;
  }
  .order_firm_content{
    font-size: 0.9em;
    /*padding:0 1rem;*/
    text-align: left;
  }
  .order_firm_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 1rem 0 2rem;
  }
</style>

<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_start{
    justify-content: space-between;
    align-items: flex-start;
  }
</style>